<template>
  <div class="main-container">
    <el-button type="primary" @click="addPermission()" style="margin-bottom: 20px;">添加权限</el-button>
    <el-table :data="permissionList" style="width: 100%; margin-bottom: 20px;" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column width="60"> </el-table-column>
      <el-table-column prop="id" label="ID" width="80" align="center"> </el-table-column>
      <el-table-column prop="title" label="权限名称" width="180"> </el-table-column>
      <el-table-column label="添加时间" align="center" width="150">
        <template slot-scope="scope">
          <div>
            {{ scope.row.add_time | timeFormat('yy-mm-dd hh:MM:ss') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" align="center"> </el-table-column>
      <el-table-column prop="isshow" label="是否显示" align="center">
        <template slot-scope="scope">
          <div>
            <el-switch v-model="scope.row.isshow" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="editPermissionType(scope.row.id, scope.row.isshow)"> </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.children">
              <el-link type="primary" :underline="false" @click="addPermission(scope.row.id)">添加下级</el-link>
              <el-divider direction="vertical"></el-divider>
            </span>
            <span v-if="!scope.row.children">
              <!-- <el-popover placement="right" width="400" trigger="click">
                <el-button type="primary" style="margin-bottom: 10px;" @click="addApi(scope.row.id)">添加接口权限</el-button>

                <el-table :data="gridData">
                  <el-table-column width="150" prop="title" label="名称" align="center"></el-table-column>
                  <el-table-column prop="address" label="操作" align="center">
                    <template slot-scope="scope">
                      <el-link type="primary" :underline="false" @click="editApi(scope.row.id)">编辑</el-link>
                      <el-divider direction="vertical"></el-divider>
                      <el-link type="primary" :underline="false" @click="removeApi(scope.row.id)">删除</el-link>
                    </template>
                  </el-table-column>
                </el-table>
                <el-link type="success" :underline="false" slot="reference">接口权限</el-link>
              </el-popover> -->

              <el-link type="success" :underline="false" @click="showApiDialog(scope.row)">接口权限</el-link>
              <el-divider direction="vertical"></el-divider>
            </span>

            <el-link type="primary" :underline="false" @click="editPermission(scope.row.id)">编辑</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" :underline="false" @click="remove(scope.row.id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 接口权限弹窗 -->
    <el-dialog :title="permissionName ? permissionName : '接口权限'" :visible.sync="apiDialog" width="600px" @closed="apiDialogClosed">
      <el-form :model="apiForm" label-position="right" label-width="100px" style="width: 360px;">
        <el-form-item label="控制器方法：" class="api-list">
          <div class="api-list">
            <el-cascader :options="apiList" :props="apiProps" clearable @change="checkApi" separator="@" v-model="checkedApis"></el-cascader>
          </div>
        </el-form-item>
        <!-- <el-form-item label="活动区域" :label-width="100">
            <el-select v-model="apiForm.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="apiDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleApi">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionList, editPermissionType, getApis, addApi, getApiDetail, editApi } from '@/api/permission'
export default {
  data() {
    return {
      permissionList: [],
      apiForm: {
        pid: '',
        level: 2,
        right: [],
      },
      checkedApis: [],
      permissionName: '',
      apiProps: { multiple: true, label: 'name', value: 'name', expandTrigger: 'hover' },
      apiList: [],
      apiDialog: false,
    }
  },
  created() {
    this.getPermissionList()
    this.getApis()
  },
  methods: {
    async getPermissionList() {
      const res = await getPermissionList()
      if (res.status != 1) return this.$message.error(res.msg)
      // this.$message.success(res.msg)
      this.permissionList = res.data
    },
    async getApis() {
      const res = await getApis()
      this.apiList = res.data
    },
    addPermission(pid = 0) {
      this.$router.push({
        path: '/addPermission',
        query: {
          pid,
        },
      })
    },
    editPermission(id) {
      this.$router.push({
        path: '/editPermission',
        query: {
          id,
        },
      })
    },
    async handleApi() {
      if (this.apiForm.right.length == 0) return this.$message.warning('请先选择接口权限')
      // 通过ID判断，如果没有ID，则说明是新增。有的话，就是修改
      let res = {}
      if (!this.apiForm.id) {
        res = await addApi(this.apiForm)
      } else {
        res = await editApi(this.apiForm)
      }
      // console.log(res)
      if (res.status != 1) return this.$message.error(res.msg)
      this.$message.success(res.msg)
      this.apiDialog = false
      this.getPermissionList()
    },
    async addApi() {
      // this.$router.push({
      //   path: '/addApi',
      //   query: {
      //     id,
      //   },
      // })
    },
    checkApi(val) {
      this.apiForm.right = []
      for (var i = 0; i < val.length; i++) {
        this.apiForm.right.push(`${val[i][0]}@${val[i][1]}`)
      }
      // for (var i = 0; i < val.length; i++) {
      //   this.form.content.push(val[i][1])
      // }
      console.log(val)
    },

    async showApiDialog(row) {
      const res = await getApiDetail(row.id)
      console.log(res)
      // 通过返回值判断该权限是否添加过接口
      if (res.data != null) {
        this.apiForm = res.data
        this.checkedApis = []
        for (var i = 0; i < this.apiForm.right.length; i++) {
          this.checkedApis.push(this.apiForm.right[i].split('@'))
        }
      } else {
        this.apiForm.pid = row.id
      }
      this.permissionName = row.title
      this.apiDialog = true
    },
    apiDialogClosed() {
      this.apiForm = this.$options.data().apiForm
    },
    remove(id) {
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.editPermissionType(id, 3)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async editPermissionType(id, type) {
      const res = await editPermissionType({
        id,
        type: type + '',
      })
      if (res.status != 1) return this.$message.error(res.msg)
      this.$message.success(res.msg)
      this.getPermissionList()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-table__row {
    height: 50px !important;
  }
  .el-input__inner {
    width: 300px;
  }
}
::v-deep .el-cascader-menu .el-cascader-menu__wrap {
  height: 600px !important;
}
</style>
